<template>
	<view class="">

		<!-- 头部标签 -->
		<view class="head displayFlex" :style="{height:winInfo.height-25+'px',paddingTop:winInfo.top-15+'px'}">
			<image @tap="returnTap" style="width: 34rpx" src="/static/return.png" mode="widthFix">
			</image>
			<text>浏览记录</text>
		</view>
		<view class="leftRight" :style="{ height: winInfo.height + 'px', paddingTop: winInfo.top +50 + 'px' }">
			<view class="searchbox displayFlex">
				<image src="/static/images/my/icon-搜索@2x.png"></image>
				<input style="width: 100%" @confirm="searchBrowse" type="text" v-model="browseSearch"
					placeholder="搜索浏览记录" placeholder-class="search-holder" />
			</view>

			<view class="SpaceBetween displayFlexSpaceBetween">
				<view class="label ">
					<view @tap="selectIndex(index)" class="label-item" v-for="(item,index) in typeList" :key="index">
						<view :style="currIndex==index?'font-weight: 800;color: #FB353B;':''">
							{{item}}
							<view v-if="currIndex==index" class="selected-icon"></view>
						</view>
					</view>
				</view>
				<view class="SpaceBetween-time">
					<text>浏览时间</text>
					<image src="/static/images/my/icon-下拉@2x.png"></image>
				</view>
			</view>
			<view class="recordTime">
				<text>今天</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winInfo: {
					height: 64, //header高度
					top: 26, //标题图标距离顶部距离
					scrollH: 0 //滚动总高度
				},
				browseSearch: '',
				typeList: ['文章/视频', '活动'],
				currIndex: 0,
			}
		},
		mounted() {
			let obj = {}
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu()
			// #endif
			// #ifdef MP-WEIXIN
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.winInfo = res
						this.winInfo.width = obj.left || res.windowWidth
						this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res
							.statusBarHeight + 44
						this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6

						this.winInfo.scrollH = res.windowWidth
						this.winInfo.bottom = res.windowHeight
						console.log('信息：', res)
						console.log('底部信息：', this.winInfo.bottom)
					}
				})
			}, 0)
			this.loading = false
			// #endif
		},
		methods: {
			returnTap() {
				uni.navigateBack({
					delta: 1
				});
			},
			/**
			 * 选择标签
			 */
			selectIndex(index) {

				this.currIndex = index;
				if (this.currIndex != index) {
					this.currIndex = index
				}
				console.log('currIndex:', index);

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.leftRight {
		margin: 0 25rpx;
	}

	.head {
		position: fixed;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 100;

		image {
			margin: 0 0rpx 0 30rpx;
		}

		text {
			font-weight: 800;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.searchbox {
		background: #FFFFFF;
		border-radius: 94rpx;
		padding: 15rpx 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}

		input {
			font-weight: 500;
			font-size: 30rpx;
			color: #000;
		}
	}

	.search-holder {
		font-weight: 500;
		font-size: 30rpx;
		color: #999999;
	}

	.label {

		font-weight: 500;
		font-size: 30rpx;
		color: #999999;

		.label-item {
			// flex: 1;
			width: 150rpx;
			//行内块 不换行
			display: inline-block;

			view {
				text-align: center;
			}
		}

		.selected-icon {
			width: 66rpx;
			height: 6rpx;
			background: #FB353B;
			border-radius: 8rpx;
			margin: 4rpx auto 0;
		}
	}

	.SpaceBetween {
		width: 100%;
		margin: 20rpx 0;
		&-time {
			background: #FFFFFF;
			border-radius: 8rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #FB353B;
			padding: 4rpx 12rpx;

			image {
				width: 22rpx;
				height: 22rpx;
				margin-left: 5rpx;
			}
		}

	}
	.recordTime{
		text{
			font-weight: 500;
			font-size: 30rpx;
			color: #444444;
		}
		
	}
</style>